<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>广告列表</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/animate.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--日期选择插件-->
  <link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
  <!--修改图片-->
  <link rel="stylesheet" href="js/dropzone/min/basic.min.css" />
  <link rel="stylesheet" href="js/dropzone/min/dropzone.min.css" />
  <!--时间选择插件-->
  <link rel="stylesheet" href="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">


</head>
<body>
<div class="container-fluid p-t-15">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">

          <div id="toolbar" class="toolbar-btn-action">
            <form class="form-inline" method="post" id="searchForm">
              <div class="form-group">
                <label>广告名称:</label>
                <input type="text" class="form-control" name="adverName">
              </div>
              <div class="form-group">
                <label>广告位置:</label>
                <select name="adverType" class="form-control">
                  <option value="">全部</option>
                  <option value="1">APP首页轮播</option>
                  <option value="2">分类轮播图</option>
                  <option value="3">新人福利</option>
                  <option value="4">扶贫助农</option>
                  <option value="5">9.9块包邮</option>
                  <option value="6">同城广告</option>
                  <option value="7">驿站广告</option>
                </select>
              </div>
              <div class="form-group">
                <button class="btn btn-info btn_query btn-round" type="button" id="searchFormBtn">查询</button>
              </div>
              <div class="form-group">
                <button class="btn btn-success btn_query btn-round" type="button" id="addBtn">添加</button>
              </div>
            <div class="form-group">
              <button class="btn btn-warning btn_query btn-round" type="button" id="editBtn">编辑</button>
            </div>
          <div class="form-group">
            <button class="btn btn-danger btn_query btn-round" type="button" onclick="changeUserStatus(0)">下线</button>
          </div>
        <div class="form-group">
          <button class="btn btn-purple btn_query btn-round" type="button" onclick="changeUserStatus(1)">发布</button>
        </div>
      </form>
    </div>

  </div>
  <div class="card-body">

    <table id="grid_data" class="table text-nowrap"></table>

  </div>
</div>
</div>
</div>

<!--  添加与编辑模态框 -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div id="error_tips" style="color: #c9302c"></div>
      </div>
      <div class="modal-body">
        <form id="addOrEditForm"  method="post">
          <div class="row">
            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon" id="basic-account">广告名称</span>
                <input type="hidden" name="id">
                <input type="text" name="adverName" class="form-control" aria-describedby="basic-account" placeholder="" id="adverName">
                <div class="help-block with-errors"></div>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
              <span class="input-group-addon" id="basic-adverType">广告位置</span>
              <select name="adverType" class="form-control">
                <option value="1">APP首页轮播</option>
                <option value="2">分类轮播图</option>
                <option value="3">新人福利</option>
                <option value="4">扶贫助农</option>
                <option value="5">9.9块包邮</option>
                <option value="6">同城广告</option>
                <option value="7">驿站广告</option>
              </select>
              </div>
            </div>


            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon">广告排序</span>
                <input type="text" name="adverOrder" class="form-control" aria-describedby="basic-account" placeholder="" id="adverOrder">
                <div class="help-block with-errors"></div>
              </div>
            </div>

            <div class="col-xs-12">
              <div class="input-group m-b-10">
                <span class="input-group-addon">广告链接</span>
                <input type="text" name="adverUrl" class="form-control" aria-describedby="basic-account" placeholder="" id="adverUrl">
                <div class="help-block with-errors"></div>
              </div>
            </div>

              <div class="col-xs-12">
                <label for="picUrl" class="control-label">上传图片(图片尺寸694*300)：</label>
                <input type="hidden" name="picUrl" id="picUrl">
                <div id="example-dropzone"  class="dropzone"></div>
              </div>

            <div class="col-xs-12">
              <label for="note">备注</label>
              <textarea class="form-control" name="note" id="note" rows="3"></textarea>
            </div>


         </div>
        </form>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary addSaveBtn" id="addSaveBtn">保存</button>
        </div>
      </div>

    </div>
  </div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.version.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.core.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.message.js"></script>
<!-- bootstrap表单验证插件 -->
<script type="text/javascript" src="js/bootstrap-validator-master/dist/validator.js"></script>

<!-- bootstrap表单验证插件 -->
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<!-- jquery-form表单提交插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.form.js"></script>
<!-- bootstrap弹出框插件 -->
<script type="text/javascript" src="js/jquery.bootstrap.min.js"></script>
<!-- 表单填充插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.formloader.js"></script>
<!-- 邮箱自动填充插件 -->
<script type="text/javascript" src="js/email/autoMail.js"></script>
<!-- boostrap-combox下拉框检索插件 -->
<script type="text/javascript" src="js/suggest/bootstrap-suggest.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.suggest.js"></script>
<!--日期选择插件-->
<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 调用日期插件 -->
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/dropzone/min/dropzone.min.js"></script>
<script src="js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<script type="text/javascript">


  //防止报"Dropzone already attached."的错误
  Dropzone.autoDiscover = false;
  // 默认使用情况  （图片）
  $("#example-dropzone").dropzone({
    url: "/fileUpload/noticeFile",
    dictDefaultMessage: '拖动文件至此或者点击上传',
    method: "post",  // 也可用put
    paramName: "file", // 默认为file
    maxFiles: 1,// 一次性上传的文件数量上限
    maxFilesize: 2, // 文件大小，单位：MB
    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
    addRemoveLinks: true,
    parallelUploads: 1,// 一次上传的文件数量
    dictMaxFilesExceeded: "您最多只能上传1个文件！",
    dictResponseError: '文件上传失败!',
    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
    dictFallbackMessage: "浏览器不受支持",
    dictFileTooBig: "文件过大上传文件最大支持.",
    dictRemoveLinks: "删除",
    dictCancelUpload: "取消",
    init: function () {
      this.on("addedfile", function (file) {
        // 上传文件时触发的事件
        //console.log(file);
      });
      this.on("success", function (file, data) {
        // 上传成功触发的事件
        //console.log(data.data+"bbbbbb");
        document.getElementById("picUrl").value=data.data;
      });
      this.on("error", function (file, data) {
        // 上传失败触发的事件
        //console.log(file+"cccccc");
        //console.log(data+"dddddd");
      });
      this.on("removedfile", function (file) {
        // 删除文件时触发的方法
        var fileUrl = $("#picUrl").val();
        zero2one.requestV("/removeFile",{imageUlr: fileUrl},function (data) {
          $("#picUrl").val("");
        });
      });

    }
  });

  //设置表头
  var columns = [
    {checkbox: true},
    {field: 'id',title: '编号'},
    {field: 'adverName',title: '广告名称'},
    {field: 'adverType',title: '广告位置',formatter: function (value, row, index) {
        if(value=='1') {
          return "APP首页轮播"
        }else if(value=='2') {
          return "分类轮播图"
        }else if(value=='3') {
          return "新人福利"
        }else if(value=='4') {
          return "扶贫助农"
        }else if(value=='5') {
          return "9.9块包邮"
        }else if(value=='6') {
          return "同城广告"
        }else if(value=='7') {
          return "驿站广告"
        }
      }},
    {field: 'picUrl',title: '广告图片',formatter: function (value, row, index) {
        var html = "<img style='width: 150px;height: 60px' src='"+value+"'/>";
        return html;
        //return"&nbsp;&nbsp;<img style='width: 400px;height: 60px; border:1px solid #2ba3f6' src='"+value+"'/>";
      }},
    {field: 'adverOrder',title: '广告排序'},
    {field: 'adverStatus',title: '广告状态',formatter: function (value, row, index) {
        if(value=='0') {
           var html= "<button class=\"btn btn-danger btn-sm\">下&nbsp;&nbsp;线</button>";
          return html
        }else if(value=='1') {
          var html= "<button class=\"btn btn-purple btn-sm\">发&nbsp;&nbsp;布</button>";
          return html
        }else if(value=='2') {
          var html= "<button class=\"btn btn-dark btn-sm\">未发布</button>";
          return html
        }
      }},
   {field: 'operatorTime',title: '操作时间', formatter: function (value,row,index) {
       return zero2one.dateFormat(value, 'Y-m-d H:i:s')
     }},
    {field: 'account',title: '操作人'},
    {field: 'note',title: '备注'}
  ];

  //进入主界面加载数据
  zero2one.datagrid("grid_data", "/remote/adver/list",function (params) {
    return $.extend(zero2one.tableInitParam(params), zero2one.form2json("searchForm"));
  }, columns);

  //点击查询按钮重新加载页面数据
  $("#searchFormBtn").click(function () {
    $('#grid_data').bootstrapTable('refresh');
  });




  //改变广告状态
  function changeUserStatus(status) {
    //获取选中行的数据
    var datas = $('#grid_data').bootstrapTable('getSelections');
    //判断是否选中行数据，如果没有则提示
    if(datas.length > 0){
      $.messager.confirm("温馨提示", "您确定更改状态吗?", function () {
        //发送请求,执行批量删除
        var str="";
        $.each(datas,function (i,v) {
          str += v.adverType+",";
        });
        var ss= str.substring(0,str.length-1);
        var tt=ss.split(",");//转数组去重
        var sz=$.unique(tt);
        var zf= sz.join(",");//1,2
        if(sz.length==1){
          $.post("/remote/adver/updateByIds", {"status" : status,"ids" : zero2one.array2str(datas),"adverType":zf},
                  function(data){
                    if (data.success) {
                      window.location.reload();
                    } else {
                      $.messager.alert("温馨提示", data.msg)
                    }
                  }, "json");
        }else {
          $.messager.alert("请选择同样类型再操作")
        }

      })
    }else{
      $.messager.alert("温馨提示", "请至少选择一条数据操作");

    }
  }

   //添加
  $("#addBtn").click(function () {

    $("#example-dropzone").empty();
    $("#adverName").val("");
    $("#note").val("");
    $("#adverOrder").val("");
    $("#adverUrl").val("");
    $("#addOrEditModal").modal("show");

  });

  //编辑用户
  $("#editBtn").click(function () {
    //获取选中行的数据
    $("#example-dropzone").empty();
    var datas = $('#grid_data').bootstrapTable('getSelections');

    if(datas.length == 1){
      //填充表单数据
      var dropz = Dropzone.forElement('#example-dropzone');//获取Dropzone元素节点
      //创建模拟文件
      var mockFile = {
        name: datas[0].picUrl , //显示的文件名
        accepted:true
      };
      dropz.emit("addedfile", mockFile);
      //图片地址
      var imageUrl =datas[0].picUrl;
      //生成缩略图
      dropz.emit("thumbnail", mockFile,imageUrl);
      //完成（如果没有，缩略图上会有一根进度条一直存在）
      dropz.emit("complete", mockFile);
      $("#addOrEditForm").formloader({data: datas[0]});
      var adverStatus= $("select[name='adverStatus']").find("option[value="+datas[0].adverStatus+"]").prop("selected", true);
      var adverType= $("select[name='adverType']").find("option[value="+datas[0].adverType+"]").prop("selected", true);
      $("#addOrEditModal").modal("show");
    }else{
      $.messager.alert("温馨提示", "请选择一条数据操作");
    }
  });

  $('#addOrEditForm').bootstrapValidator({
    fields: {
      adverName: {validators: {notEmpty: {message: '广告名称不能为空'}}},
      adverUrl: {validators: {notEmpty : {message: '广告链接不能为空'}}},
      adverOrder: {validators: {notEmpty : {message: '广告排序不能为空'}}},
    }
  });

  //点击保存按钮
  $("#addSaveBtn").click(function () {
    var bv = $('#addOrEditForm').data('bootstrapValidator');
    bv.validate();
    if (bv.isValid()) {
      zero2one.request("/remote/adver/addOrEdit",$("#addOrEditForm").serialize(),function (data) {
        window.location.reload();
      });
    }
  });

</script>

</div>
</body>
</html>
